<template>
  <div id="folder">
    <div class="folder" @dblclick="handleDBClick">
      <svg-icon icon-class="folder" class="icon-folder"></svg-icon>
    </div>

    <div class="fileName textEllipsis">{{ name }}</div>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import {utf8_to_b64, b64_to_utf8} from '@/utils/utils'

export default {
  name: "Folder",

  components: {SvgIcon},

  props: {
    name: {
      default: "default",
      type: String,
      required: false,
    }
  },

  data() {
    return {}
  },

  methods: {
    handleDBClick() {
      let path = this.$route.path

      let query = b64_to_utf8(this.$route.query.path)
      if (query === '/') {
        query += this.name
      } else {
        query = query + '/' + this.name
      }

      this.$router.push({
        path: path,
        query: {
          path: utf8_to_b64(query)
        }
      })

    },
  }
}
</script>

<style scoped lang="scss">
#folder {
  width: 8rem;
  height: 8rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: #d9eeff;

    .fileName {
      color: #000;
    }
  }
}

.folder {
  width: 8rem;
  height: 6rem;
  padding: 5px;
}

.icon-folder {
  width: 100%;
  height: 100%;
}

.fileName {
  width: 8rem;
  padding: 0 10px;
  color: #f3f4f7;
}
</style>